.bottom-box {
  position: relative;
  box-shadow: 0 1px 1px #333;
}
.flex-box {
  background: #FFFFFF;
  color: #333;
  display: flex;
  align-items: center;
  height: 50px;
}
.flex-box .item {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: center;
  flex: 1;
  text-align: center;
}
.flex-box .item * {
  transition: color 0.3s, font-size 0.3s;
}
.flex-box .item .grid-cell {
  line-height: 16px;
  font-size: 12px;
}
.flex-box .item.active {
  color: #2196f3;
}
.flex-box .item.active .grid-cell {
  font-size: 13px;
}
.icon-svg {
  margin: auto;
  width: 24px;
  height: 24px;
  background-image: '';
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
}
.svg-x-like {
  background-image: url('../../assets/svg/x/like.svg');
}
.svg-x-lanmu {
  background-image: url('../../assets/svg/x/lanmu.svg');
}
.svg-x-message {
  background-image: url('../../assets/svg/x/message.svg');
}
.svg-x-user {
  background-image: url('../../assets/svg/x/user.svg');
}
.svg-x-hg {
  background-image: url('../../assets/svg/x/hg.svg');
}
.svg-x-qiu {
  background-image: url('../../assets/svg/x/qiu.svg');
}
.svg-x-kf {
  background-image: url('../../assets/svg/x/kf.svg');
}
